import Document, { Html, Head, Main, NextScript } from 'next/document'

// 2.比如：监听每个渲染组件的内容
function withLog(Comp) {
  return props => {
    return <Comp { ...props } />
  }
}
class MyDocument extends Document {
  static async getInitialProps(ctx) {
		// 1.这里采用react里High Order Component的方式，可以重新包装APP和所有渲染的组件
		// 这里还可以扩展一些高级的功能，比如css in js的方案
    const originalRenderPage = ctx.renderPage
		ctx.renderPage = () => originalRenderPage({
        enhanceApp: App => withLog(App),                      
        enhanceComponent: Component => withLog(Component)      
    })
    // 因为覆盖了Document，所以要重新返回页面的props
    const props = await Document.getInitialProps(ctx)
    return {
        ...props
    }
  }

  render() {
    return(
      <Html>
        <Head>
          {/* <!-- antd 插件 高清解决方案 --> */}
          {/* <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1,viewport-fit=cover" /> */}
          <script type="text/javascript" src="/static/asserts/antd-hd.js"></script>
        </Head>     
        <body className="my-body">
            <Main />
            <NextScript />
            <script src="https://f3-md.veimg.cn/common/js/bdtj.js" type="text/javascript"></script>
            <script src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js" type="text/javascript"></script>
        </body>
      </Html>
    )
  }

}
export default MyDocument